<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .shadow{
            width: 200px;
            height: 200px;
            background-color: rgba(0,0,0,0.5);
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <button class="dispatch">派发事件</button>
    <div class="shadow"></div>
</body>
<script>
  

    var shadow = document.getElementsByClassName("shadow")[0];
    var dispatch = document.getElementsByClassName("dispatch")[0];

    // 事件监听方式绑定和清除事件
    
    // 添加事件监听
    // ele.addEventListener(eventType,callback,bool)
    // ele        绑定事件的元素
    // eventType  绑定事件的类型 (click dblclick  不加on)
    // callback   事件触发时执行的内容(注意: 函数中this ->绑定事件的元素)
    // bool       是否在捕获阶段触发事件(默认false   true)

    // 事件监听方式绑定事件  => 可以给一个元素绑定多个相同类型的事件


    // 清除事件监听
    // ele.removeEventListener(eventType,callback,bool)
    // ele        绑定事件的元素
    // eventType  绑定事件的类型 (click dblclick  不加on)
    // callback   事件触发时执行的内容(注意: 对应回调函数的引用清除)
    // bool       是否在捕获阶段触发事件(默认false   true)


    // 拓展(向指定元素派发事件)
    // var e = new Event(eventType) // 创建一个指定类型的事件对象
    // ele.dispatchEvent(e);      // 向指定元素派发指类型的事件



    function clickHandler_1(){
        alert(1111);
    }
    function clickHandler_2(){
        console.log(this.clientWidth,this.clientHeight);
    }
    function clickHandler_3(){
        this.style.background = randColor();
    }
    function clickHandler_4(){
        console.log("hello");
    }

    shadow.addEventListener("click",clickHandler_1);
    shadow.addEventListener("click",clickHandler_2);
    shadow.addEventListener("click",clickHandler_3);
    shadow.onclick = clickHandler_4;   //赋值

    // shadow.onclick();   dom一级主动触发事件 => 取值调用
    
    dispatch.onclick = function(){
        // 1. 创建一个事件对象
        var e = new Event("click");  // 创建一个事件对象 =>click类型的
        // var e = new MouseEvent("mousedown"); // 鼠标事件事件对象
        // var e = new KeyboardEvent("keydown");

        // 2. 向指定元素派发事件
        shadow.dispatchEvent(e);
        
    }

    // var e = new Event("click");  // 创建一个事件对象 =>click类型的
    // shadow.dispatchEvent(e);

   


    function randColor() {
        var str = "0123456789abcdef";

        var colorStr = "#";
        for (var i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * str.length);
            var char = str.charAt(index);
            colorStr += char;
        }
        return colorStr;
    }

</script>
</html>